<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
	<link rel="stylesheet" href="css/index.css" />
    <title>选择位置</title>
    <style>
       body,html{
           width: 100%;
           height: 100%;
           padding: 0;
           margin: 0;
       }
       #container{
           width: 100%;
           height: 13.44rem;
           overflow: hidden;
		   position: relative;
       }
       #result{
           position: fixed;
           top: 10px;
           left: 10px;
           width: 250px;
           height: 30px;
           line-height: 30px;
           text-align: center;
           background: #fff;
           box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
           border-radius: 7px;
           z-index: 99;
       }
	   #remark{
		   width: 0.81rem;
		   height: 1.13rem;
		   position: absolute;
		   display: flex;
		   left: 50%;
		   top: 50%;
		   transform: translate(-50%, -50%);
		   z-index: 1000;
	   }
	   #remark img{
		   width: 100%;
		   height: 100%;
	   }
	   .container_xx{
		   position: relative;
		   width: 100%;
		   height: 13.44rem;
	   }
	   .submit_box {
	   	margin: 0 auto;
	   	margin-top: 0.63rem;
	   	width: 10.78rem;
	   	height: 1.56rem;
	   	background: linear-gradient(318deg, #FF9100 0%, #FFA400 100%);
	   	border-radius: 0.19rem;
	   	display: flex;
	   	font-size: 0.56rem;
	   }
	   
	   .submit_box .van-button {
	   	width: 10.78rem;
	   	height: 1.56rem;
	   	background: linear-gradient(318deg, #FF9100 0%, #FFA400 100%);
	   	border-radius: 0.19rem;
	   	color: #fff;
	   	border: none;
	   	font-size: 0.56rem;
	   }
    </style>
</head>
<body>
	<div id="app">
		<van-search
		  v-model="value"
		  show-action
		  label="查找油站"
		  placeholder="请输入具体地址"
		 
		>
		  <template #action>
		    <div @click="onSearch">搜索</div>
		  </template>
		</van-search>
		
		<div class="container_xx">
			<div id='container'></div>
			<div id="remark">
				<img src="img/hj_map_btn_oil@2x.png" >
			</div>
		</div>
		<div class="submit_box" @click="selectThisAddress">
			<van-button round block type="info" native-type="button">确认选择</van-button>
		</div>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=WZp3MbqSXW5YUgDSYIMaqLQHd0tKZeKq">
	<script src="https://img.ejiayou.com/activity/js/common/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vant.min.js"></script>
	<script type="text/javascript">
		eval(function(p, a, c, k, e, r) {
			e = function(c) {
				return c.toString(a)
			};
			if (!''.replace(/^/, String)) {
				while (c--) r[e(c)] = k[c] || e(c);
				k = [function(e) {
					return r[e]
				}];
				e = function() {
					return '\\w+'
				};
				c = 1
			};
			while (c--)
				if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
			return p
		}('(6(a,d){j b=a.i,e="3"f 5?"3":"9",c=6(){b.7.8=(2>b.4?b.4:2)/2*g+"h"};a.0&&(d.0(e,c,!1),a.0("k",c,!1))})(l,5);',
			22, 22,
			'addEventListener||750|orientationchange|clientWidth|window|function|style|fontSize|resize||||||in|64|px|documentElement|var|DOMContentLoaded|document'
			.split('|'), 0, {}))
	</script>
    <script>
		var map, driving;
		var isClickNav = false;
		var map 
		var myGeo
		var vm = new Vue({
			el: '#app',
			data: {
				value: ''
			},
			created() {
				
				
			},
			mounted() {
				this.value = decodeURI(getQueryVariable('address')) || ''
				map = new BMapGL.Map('container');
				map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
				//创建地址解析器实例
				myGeo = new BMapGL.Geocoder();
				map.enableScrollWheelZoom(true);
				// 将地址解析结果显示在地图上，并调整地图视野
				this.initData()
			},
			methods:{
				initData: function() {
					var address = decodeURI(getQueryVariable('address')) || ''
					myGeo.getPoint(address, function(point){
					    if(point){
							console.log(point)
					        map.centerAndZoom(point, 16);
					    }else{
					        vant.Toast('您选择的地址没有解析到结果！');
					    }
					}, '北京市')
				},
				selectThisAddress: function() {
					var cen = map.getCenter();
					localStorage.setItem('longitude_cen_ejy',JSON.stringify(cen))
					localStorage.setItem('longitude_cen_ejy_dizhi',this.value)
					location.replace(decodeURIComponent(getQueryVariable('reback_url')))
				},
				onSearch: function() {
					var self = this
					myGeo.getPoint(this.value, function(point){
					    if(point){
					        map.centerAndZoom(point, 16);
					      
					    }else{
					        alert('您选择的地址没有解析到结果！');
					    }
					}, '北京市')
				}
			}
		})
       
    </script>
</body>
</html>